<template>
    <div class="w-full h-full">
        <div>
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
        <div class="w-2/3 h-full m-auto shadow-lg overflow-y-scroll">
            <div v-if="contest.length > 0" class="m-3" v-for="item, index in contest[0].question_list" :key="index">
                <el-card>
                    <div>题目内容:{{ item.content }}</div>
                    <div v-if="item.type === '判断题'">
                        <el-radio-group v-model="answers[index]">
                            <el-radio label="正确">正确</el-radio>
                            <el-radio label="错误">错误</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-else>
                        你的答案：
                        <el-input v-model="answers[index]">
                        </el-input>
                    </div>
                    <div>分值:
                        <el-tag>
                            {{ item.score }}
                        </el-tag>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const query = ref(route.query)
const contest = ref([])
const answers = ref([])
axios.post('http://localhost:8000/contests/get_one', { id: query.value.id })
    .then(res => {
        contest.value = res.data.data
        console.log(contest.value)
        answers.value.fill('', contest.value.question_list.length)
    })
    .catch(err => {
        console.log(err)
    })

function submitContest() {
    let score = 0
    contest.value[0].question_list.forEach((item, index) => {
        if (item.type === '判断题') {
            if (item.answer === answers.value[index]) {
                score += item.score
            }
        }
        else {
            if (item.answer === answers.value[index]) {
                score += +item.score
            }
        }
    })
    let payload = {
        user_id: localStorage.getItem('user_id'),
        username: localStorage.getItem('username'),
        contest_id: contest.value[0].id,
        answer_list: answers.value,
        question_list: contest.value[0].question_list,
        contest_name: contest.value[0].name,
        submit_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        score: score
    }
    axios.post('http://localhost:8000/contest_user/add_one', payload)
        .then(res => {
            if (res.data.code === 200) {
                ElMessage({
                    message: '提交成功',
                    type: 'success'
                })
            }
            else {
                ElMessage({
                    message: '提交失败',
                    type: 'error'
                })
            }
        })
        .catch(err => {
            console.log(err)
        })
}

function submit() {
    axios.post('http://localhost:8000/contest_user/get_one', { user_id: localStorage.getItem('user_id'), contest_id: contest.value[0].id })
        .then(res => {
            if (res.data.code === 200 && res.data.data.length > 0) {
                ElMessage({
                    message: '你已经提交过了',
                    type: 'warning'
                })
            }
            else {
                submitContest()
            }
        })

}

</script> 
 
<style scoped></style>